<script setup>
import { RouterView, useRoute } from 'vue-router'
import { computed, ref, onMounted } from 'vue'
import SidebarMenu from './components/layout/SidebarMenu.vue'
import HeaderNav from './components/layout/HeaderNav.vue'
import { useThemeStore } from './stores/themeStore'

const route = useRoute()
const themeStore = useThemeStore()
const isLoginPage = computed(() => route.name === 'login')

// 控制侧边栏折叠状态
const sidebarCollapsed = ref(false)
const toggleSidebar = () => {
  sidebarCollapsed.value = !sidebarCollapsed.value
}

// 检查是否是小屏幕，默认折叠侧边栏
const checkScreenSize = () => {
  if (window.innerWidth < 768) {
    sidebarCollapsed.value = true
  }
}

// 确保主题初始化
onMounted(() => {
  themeStore.initTheme()
})

// 在组件挂载时检查屏幕尺寸并监听窗口大小变化
if (typeof window !== 'undefined') {
  checkScreenSize()
  window.addEventListener('resize', checkScreenSize)
}
</script>

<template>
  <!-- 登录页面布局 -->
  <RouterView v-if="isLoginPage" />
  <!-- 常规应用布局 -->
  <div v-else class="flex h-full w-full overflow-hidden app-container">
    <!-- 左侧导航栏 -->
    <SidebarMenu 
      :collapsed="sidebarCollapsed" 
      class="h-screen shadow-md flex-shrink-0 transition-all duration-300"
    />
    
    <!-- 主内容区域 -->
    <div class="flex-1 flex flex-col h-screen overflow-hidden w-full">
      <!-- 顶部导航栏 -->
      <HeaderNav 
        @toggle-sidebar="toggleSidebar" 
        class="app-header z-10 flex-shrink-0 w-full"
      />
      
      <!-- 主要内容 -->
      <main class="flex-1 overflow-auto p-4 w-full main-content">
        <RouterView />
      </main>
    </div>
  </div>
</template>

<style>
/* 定义根变量，会被themeStore中的设置覆盖 */
:root {
  --app-background: #F5F7FA;
  --app-background-gradient: linear-gradient(to right bottom, #EBF2FB, #F5F7FA);
  --app-card-background: #FFFFFF;
  --app-border-color: #E4E7ED;
  --app-text-primary: #303133;
  --app-text-secondary: #606266;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--app-text-primary);
}

#app {
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.app-container {
  background: var(--app-background-gradient);
  color: var(--app-text-primary);
  transition: all 0.3s ease;
}

.app-header {
  background: var(--app-card-background);
  border-bottom: 1px solid var(--app-border-color);
}

.bg-white, .bg-background {
  background-color: var(--app-card-background) !important;
}

.text-gray-500, .text-text-light {
  color: var(--app-text-secondary) !important;
}

.text-gray-700, .text-gray-800, .text-text-dark {
  color: var(--app-text-primary) !important;
}

.border-gray-200, .border-border-light {
  border-color: var(--app-border-color) !important;
}

/* 主内容区域添加花纹背景 */
.main-content {
  position: relative;
}

.main-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 25px 25px, rgba(0, 0, 0, 0.01) 2px, transparent 0),
    radial-gradient(circle at 75px 75px, rgba(0, 0, 0, 0.01) 2px, transparent 0);
  background-size: 100px 100px;
  pointer-events: none;
  z-index: -1;
}

/* 暗黑模式样式覆盖 */
.dark-theme .el-card,
.dark-theme .el-input__wrapper,
.dark-theme .el-button--default {
  background-color: var(--app-card-background) !important; 
  border-color: var(--app-border-color) !important;
  color: var(--app-text-primary) !important;
}

.dark-theme .el-button--default:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.dark-theme .el-input__wrapper {
  box-shadow: 0 0 0 1px var(--app-border-color) inset !important;
}

.dark-theme .el-input__inner {
  color: var(--app-text-primary) !important;
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.dark-theme ::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.dark-theme ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}

.dark-theme ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}
</style>
